<template>
  <div class="pinglun">
    <div class="pl-520am" data-id="25" data-classid="5" data-showhot="0">
      <div class="pl-area-post">
        <div class="pl-post">
          <div class="pl-textarea">
            <textarea
              class="pl-post-word"
              v-model.trim="form.comment"
              placeholder="有什么想说的呢？"
            ></textarea>
          </div>
          <div class="pl-tools">
            <ul>
              <li class="pl-tools-lastchild">
                <button class="pl-submit-btn" @click="submit_comment">
                  发 布
                </button>
              </li>
              <li class="username">
                <v-icon>mdi-account</v-icon>
                <input
                  type="text"
                  v-model.trim="form.username"
                  class="pl-key"
                  size="15"
                  placeholder="你的昵称"
                />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <br />
      <div class="pl-header">
        <br />
        共<em id="pl-joinnum">{{ count }}</em
        >条评论<span class="pl-userinfo" id="pl-userinfo"></span>
      </div>
      <v-progress-linear
        v-show="loading"
        indeterminate
        color="green"
      ></v-progress-linear>
      <!-- 提示 -->
      <v-alert v-show="system_error" dense outlined type="error">
        {{ system_error }}
      </v-alert>

      <div class="pl-show-list" id="pl-show-all">
        <div class="pl-area pl-show-box" v-for="(s, i) in lastest" :key="i">
          <div class="pl-area-userpic">
            <span class="userpic" :style="{backgroundColor:getUserPic(s.username).c}">{{ getUserPic(s.username).s }}</span>
          </div>
          <div class="pl-area-post">
            <div class="pl-show-title">
              <span>{{ s.username }}</span>
              <span class="pl-show-time pl-fr">{{ s.create_at }}</span>
            </div>
            <div class="pl-show-saytext">{{ s.comment }}</div>
            <div class="pl-show-tools" v-if="false">
              <a @click="operation(s.id, 0)">
                <v-icon>mdi-thumb-down</v-icon>
                <span>({{ s.cai }})</span>
              </a>

              <a class="pl-reply" @click="operation(s.id, 1)">
                <v-icon>mdi-thumb-up</v-icon>
                <span>({{ s.zan }})</span>
              </a>
            </div>
            <div class="pl-show-replay"></div>
          </div>
          <div class="pl-clr"></div>
        </div>
      </div>
      <div id="pl-pagination"></div>
      <button
        v-show="query.page < query.pages"
        @click="load_more"
        class="showAllComment buttonGray"
        style="display: inline-block"
      >
        查看更多
      </button>
    </div>
  </div>
</template>
<script>
import axios from "../utils/axios";
const colors = ['#7cb342','#424242','#c62828','#c2185b','#0097a7','#26a69a','#388e3c','#f4511e','#303f9f','#4527a0','#37474f']
export default {
  props: ["aid",'type'],
  data() {
    return {
      form: {
        username: "",
        aid: 0,
        comment: "",
        type:1,
      },
      query: {
        page: 1,
        aid: 0,
        pages: 0,
      },
      loading: true,
      system_error: "",
      lastest: [],
      count: 0,
    };
  },
  mounted() {
    this.query.aid = this.aid;
    this.form.aid = this.aid;
    this.form.type = this.type;
    this.load_list();
    
  },
  methods: {
    getUserPic(name = "") {
      let s = name.substring(0, 1)
      s = s?s:' '
      let i = s.codePointAt()%colors.length
      return {
        s,
        c:colors[i],
      }
    },
    load_more() {
      if (this.query.page < this.query.pages) {
        this.query.page++;
        this.load_list();
      }
    },
    operation(id, t) {
      //点赞或踩
      axios
        .post("/comments/" + id + "/" + t, {})
        .then(function (res) {
          console.log(res);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    load_list() {
      this.loading = true;
      axios
        .get("comments?page=" + this.query.page + "&aid=" + this.query.aid+ "&type=" + this.form.type)
        .then((res) => {

          this.loading = false;
          if (res.code != 200) {
            this.system_error = res.msg;
          } else {
            this.system_error = '';
            const data = res.data;
            this.lastest = this.lastest.concat(data.lastest);
            this.query.pages = data.pages;
            this.count = data.count;
          }
        });
    },
    submit_comment() {
      if(this.loading){
        return
      }
      if(this.form.comment==''){
        this.system_error = '请输入内容！'
        return
      }
      if(this.form.username==''){
        this.system_error = '请输入昵称！'
        return
      }
      this.loading = true;
      axios
        .post("/comments/" + this.form.aid, this.form)
        .then(res=>{
          this.loading = false;
          if (res.code != 200) {
            this.system_error = res.msg;
          }else{
            this.form.comment = ''
            this.system_error = ''
            this.query.page=1;
            this.lastest = []
            this.load_list();
          }
        })
        .catch(err=>{
          console.log(err)
        });
    },
  },
};
</script>
<style scoped>
.pl-area-post{
  padding: 1em 0;
}
.username {
  box-sizing: content-box;
}
.pl-show-tools span {
  color: #777;
}
.userpic {
  width: 3em;
  height: 3em;
  display: inline-block;
  border-radius: 50%;
  background-color: #303f9f;
  text-align: center;
  line-height: 3em;
  color: #fff;
  cursor: default;
  -moz-user-select: -moz-none;
  user-select: none;
}
</style>
